<template>
  <div class="inside-page">
    <div class="resume content">
      <p class="detail-title">收到的简历 - {{ resumeTitle }}</p>
      <div class="com" style="min-height: 400px">
        <People
          :is-static="true"
          :info="info.resume"
          :edu-result="dic.eduResult"
          :city="dic.city"
        />
      </div>
      <div class="com" style="min-height: 100px">
        <Edu
          :is-static="true"
          :edu-list="info.resume_edu"
          :edu-result="dic.eduResult"
          :qualification-list="dic.edu"
        />
      </div>
      <div class="com" style="min-height: 140px">
        <Work :is-static="true" :work-list="info.resume_word" />
      </div>
      <div class="com" style="min-height: 140px">
        <Project :is-static="true" :project-list="info.resume_pro" />
      </div>
      <div class="com" style="min-height: 120px">
        <Pos :is-static="true" :poss-list="info.resume_school" />
      </div>
      <div class="com" style="min-height: 120px">
        <Reward
          :is-static="true"
          :reward-list="info.resume_school_prize"
          :prize="dic.prize_level"
        />
      </div>
      <div class="com" style="min-height: 150px">
        <Activity :is-static="true" :activity-list="info.resume_school_shaky" />
      </div>
      <div class="com" style="min-height: 120px">
        <Cert :is-static="true" :cert-list="info.resume_skill" />
      </div>
      <div class="com" style="min-height: 120px">
        <Annex :is-static="true" :annex-list="info.resume_school_file" />
      </div>
    </div>
    <div class="submit">
      <button class="confirm" type="button" @click="connect">
        联系候选人
      </button>
      <button class="confirm" type="button" @click="submit" style="width: 250px">
        加入星标简历(邀约候选人)
      </button>
      <button class="confirm" type="button" @click="toDownload">
        下载简历
      </button>
      <button class="cancel" type="button" @click="submitOne">忽略</button>
      <div class="showConnect" v-if="showConnect">
        <div class="connect">
          <div class="text">候选人已启用号码保护</div>
          <div class="tips">号码有效期为24小时，请及时联系候选人</div>
          <div class="phoneNumber">
            <span class="span1">{{ mobile }}</span>
            <span class="span2">转</span>
            <span class="span3">{{ extendNum }}</span>
          </div>
        </div>
      </div>
    </div>
    <client-only>
      <el-dialog
        width="445px"
        :visible.sync="showConfirm"
        :show-close="false"
        custom-class="dialog-confirm"
      >
        <Confirm :info-title="infoTitle" @confirm="confirm" @cancel="cancel" />
      </el-dialog>
    </client-only>
  </div>
</template>

<script>
import { loadUser } from '@/api/users';
import { resumeSee, resumeStart, downLoadResume, bindMobile, addChat } from '@/api/job';
export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      id: '',
      oid: '',
      resumeTitle: '',
      info: {
        resume: {},
        resume_edu: [],
        resume_pro: [],
        resume_school: [],
        resume_school_prize: [],
        resume_school_shaky: [],
        resume_skill: [],
        resume_word: [],
        resume_school_file: [],
      },
      dic: {
        city: [],
        edu: [],
        prize_level: [],
        eduResult: [],
        politicResult: [],
      },
      certList: [],
      showConfirm: false,
      infoTitle: '确认忽略该简历？',
      showConnect: false,
      mobile: '',
      extendNum: ''
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.id = this.$route.query.id;
    this.oid = this.$route.query.oid;
    this.resumeTitle = this.$route.query.resumeTitle;
    this.toLoadUser();
  },
  mounted () {
  },
  watch: {
  },
  computed: {

  },
  methods: {
    async toLoadUser () {
      await loadUser({
        id: this.id,
      }).then(res => {
        if (res.code === 200) {
          const obj = res.data.user_resume;
          if (res.data.user_resume) {
            obj.resume && obj.resume.hopecid === 0 && (obj.resume.hopecity_cn = { name: '其他' });
            obj.resume && (this.info.resume = obj.resume);
            obj.resume_edu && (this.info.resume_edu = obj.resume_edu);
            obj.resume_pro && (this.info.resume_pro = obj.resume_pro);
            obj.resume_school && (this.info.resume_school = obj.resume_school);
            obj.resume_school_prize && (this.info.resume_school_prize = obj.resume_school_prize);
            obj.resume_school_shaky && (this.info.resume_school_shaky = obj.resume_school_shaky);
            obj.resume_skill && (this.info.resume_skill = obj.resume_skill);
            obj.resume_word && (this.info.resume_word = obj.resume_word);
            obj.resume_school_file && (this.info.resume_school_file = obj.resume_school_file);
          }
          if (res.data.public_array) {
            if (res.data.public_array.city) {
              res.data.public_array.city.push({ id: 0, name: '其他' })
            }
            this.dic = res.data.public_array
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err || '网络错误！')
      })
    },
    connect () {
      if (this.showConnect) {
        this.showConnect = false;
        return
      }
      // bindMobile({
      //   rid: this.id
      // }).then(res => {
      //   if (res.code === 200) {
      //     const text = res.data.mobile;
      //     this.mobile = `${text.slice(0, 3)} ${text.slice(3, 7)} ${text.slice(7, 11)}`
      //     this.extendNum = res.data.extendNum || '';
      //     this.showConnect = true;
      //   } else {
      //     this.$message.error(res.msg);
      //   }
      // }).catch(err => {
      //   console.error(err)
      //   this.$message.error(err);
      // })
      addChat({
        rid: this.id
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('添加联系人成功，可进入交流平台进行交流');
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    submit () { // 星标
      resumeStart({
        id: this.oid
      }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '提交成功！');
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    toDownload () { // 下载简历
      downLoadResume({
        ids: this.id,
        jid: this.oid,
      }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '提交成功！');
          if (res.data) {
            res.data.forEach(s => {
              window.open(s, '_blank')
            })
          }
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    submitOne () { // 打开确认
      this.showConfirm = true;
    },
    cancel () {
      this.showConfirm = false;
    },
    closeWebPage () {
      if (navigator.userAgent.indexOf('MSIE') > 0) { // IE
        if (navigator.userAgent.indexOf('MSIE 6.0') > 0) { // IE6
          window.opener = null;
          window.close();
        } else { // IE6+
          window.open('', '_top');
          window.top.close();
        }
      } else if (navigator.userAgent.indexOf('Firefox') > 0 || navigator.userAgent.indexOf('Presto') > 0) { // FF和Opera
        window.location.href = 'about:blank';
        window.close();// 火狐默认状态非window.open的页面window.close是无效的
      } else {
        window.opener = null;
        window.open('', '_self', '');
        window.close();
      }
    },
    confirm () { // 确认忽略
      resumeSee({
        id: this.oid
      }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg || '提交成功！');
          setTimeout(() => {
            this.closeWebPage();
          }, 1000);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.resume {
  padding-top: 40px;
  position: relative;
}
.submit {
  max-width: 1200px;
  margin: 60px auto;
  position: relative;
  .showConnect {
    position: absolute;
    top: 70px;
    left: 150px;
    z-index: 9;
  }
  .connect {
    height: 130px;
    width: 310px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px #ebebeb;
    position: relative;
    z-index: 9;
    &::after {
      position: absolute;
      top: -15px;
      left: 50%;
      margin-left: -15px;
      content: '';
      width: 0;
      height: 0;
      line-height: 0;
      border: 15px solid transparent;
      z-index: 1;
      display: inline-block;
      border-color: #fff #fff transparent transparent;
      transform: rotate(315deg);
      box-shadow: 5px -5px 10px -5px #ebebea;
    }
    .text {
      color: $base-color;
      height: 45px;
      line-height: 45px;
      font-size: 12px;
      border-bottom: 1px solid #ebebeb;
      margin: 0 20px;
    }
    .tips {
      color: #999;
      font-size: 12px;
      line-height: 30px;
    }
    .phoneNumber {
      line-height: 40px;
      span {
        color: $base-color;
        font-size: 24px;
        font-weight: 500;
      }
    }
  }
}
</style>
